import { calcScaleRate } from '@/utils/screen'
import { useEffect, useRef } from 'react'
import styled from 'styled-components'
import { Header } from './components/Header'
import { Left } from './components/Left'
import { Center } from './components/Center'
import { Right } from './components/Right'

const Container = styled.div`
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #04060d;
`

const Screen = styled.div`
	width: 1920px;
	height: 1080px;
	overflow: hidden;
	position: relative;
	padding-top: 10px;
	background: url('src/assets/pageBg.png') center center no-repeat;
	background-size: cover;
`

const Content = styled.div`
	height: calc(100% - 65px);
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 15px;
`

export const CockpitIndex = () => {
	const scaleRef = useRef<HTMLDivElement>(null)
	useEffect(() => {
		const { calcRate, windowResize, removeWindowResize } = calcScaleRate({
			scaleDom: scaleRef.current,
		})
		calcRate()
		windowResize()
		return () => {
			removeWindowResize()
		}
	}, [])

	return (
		<Container>
			<div ref={scaleRef}>
				<Screen>
					<Header />
					<Content>
						<Left />
						<Center />
						<Right />
					</Content>
				</Screen>
			</div>
		</Container>
	)
}
